<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Collapsible Menu | Mathachew.com</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			setTimeout(function() {
				// Slide
				
                               // $('#menu1 > li > a.expanded + ul').slideToggle('medium');
				$('#menu1 > li > a').click(function() {
					$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
				});
				$('#backen_truyen .expand_all').click(function() {
					$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
				});
				$('#backen_truyen .collapse_all').click(function() {
					$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
				});
                                
			}, 250);
		});
	</script>
	<style type="text/css">
		body {
			font: 12pt Arial, Helvetica, Sans-serif;
		}
		a {
			text-decoration: none;
		}
		#backen_truyen
		{
			float: left;
                        width: 131px;
		}
		.expand_all,
		.collapse_all {
			cursor: pointer;
		}
		.example_menu {
			font-size: 90%;
			list-style: none;
			margin: 0;
			padding: 0;
			vertical-align: top;
			width: 136px;
		}
		.example_menu ul {
			display: none;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#menu1
		 {
			margin-top: 50px;
		 }
		#menu1 li,
		
		.example_menu li {
			background-image: none;
			margin: 0;
			padding: 0;
		}
		.example_menu ul ul {
			display: block;
		}
		.example_menu ul ul li a {
			padding-left: 20px;
			width: 109px;
		}
		.example_menu a {
			color: #000;
			cursor: pointer;
			display: block;
			font-weight: bold;
			margin-left: 0;
			padding: 2px 2px 2px 17px;
			width: 112px;
		}
		.example_menu a.expanded {
			background: #bbb url('images/collapse.gif') no-repeat 3px 50%;
		}
		.example_menu a.collapsed {
			background: #bbb url('/../../assets/images/expand.gif') no-repeat 3px 50%;
		}
		.example_menu a:hover {
			text-decoration: none;
		}
		.example_menu ul a {
			background: #e8e8e8;
			border-top: 2px solid #fff;
			color: #000;
			display: block;
			font-weight: normal;
			padding: 2px 2px 2px 10px;
			width: 119px;
		}
		.example_menu ul a:link {
			font-weight: normal;
		}
		.example_menu ul a:hover {
			background : #f5f5f5;
			text-decoration: underline;
		}
		.example_menu li.active a {
			background: #fff;
		}
		.example_menu li.active li a {
			background: #e8e8e8;
		}
		#menu1 li.footer,
		
		.example_menu .footer {
			background: transparent url('../../../assets/images/footer.jpg') no-repeat 0 0;
			border-top: 2px solid #fff;
			height: 9px;
			line-height: 15px;
			margin: 0 0 10px 0;
			width: 131px;
		}
		.example_menu .footer span {
			
			display: none;
		}
		#Welcome{
			background: #e8e8e8;
			color: #000;
			height: 50px;
			width: 131px;
		}
	</style>
</head>

<body>
        <div id ="Welcome">
            <ul id="login">
                <li><a>Welcome Admin User</a></li>
            </ul>
        </div>
        
	<div id="backen_truyen">
		<ul id="menu1" class="example_menu">
			<li><a class="expanded">Quản lý User</a>
		<ul>
		<li><a href="/manage/admin/index" target="right">Thêm User Mới</a>
		
		</li>
			<li class="active"><a href="#">Xóa USer</a></li>
			<li><a href="/" target="right">Cập Nhật người sử dụng</a></li>
			
		</ul>
		</li>
		<li class="footer"><span> </span></li>
		
		<li><a href="../category/" target="right" class="collapsed">Danh mục</a>
			<ul>

			<li><a href="../category/add" target="right">Thêm danh mục</a></li>
			

			</ul>
		</li>
			<li class="footer"><span> </span></li>
                        <li><a href="/manage/story/" class="collapsed" target="right">Quản lý Bộ</a>
			<ul>
			<li><a href="/manage/story/add" target="right">Thêm Bộ</a></li>
			<li><a href="/manage/story/search" target="right">Cập nhật Bộ</a></li>
			<li><a href="/manage/story/todo" target="right"> TODO DANH MỤC</a></li>		
			</ul>
		</li>
                </li>
			<li class="footer"><span> </span></li>
		
                        <li><a href="/manage/audiostory/" class="collapsed" target="right">Quản lý Truyện</a>
			<ul>
			
                        <li><a href="/manage/audiostory/add" target="right">Thêm truyện </a></li>
			<li><a href="/manage/audiostory/search" target="right">Cập nhật truyện</a></li>
			<li><a href="/manage/audiostory/todo" target="right"> TODO Truyện</a></li>		
			
                        </ul>
		
			<li class="footer"><span> </span></li>
		</ul>
		
         
	</div>
	
</body>
</html>